
<h1><font size="10"><b>Sistema Rutas Administrador</b></font></h1>
<br>

<br>

<br>


<table class="tabs">
    
    <tr>
        <th class="tabcks">&nbsp;</th>
        <th class="tabck" id="tabck-1" onclick="activaTab(this)">Acerca del Sistema</th>
        <th class="tabcks">&nbsp;</th>
        <th class="tabck" id="tabck-2" onclick="activaTab(this)">Guia del uso del Administrador</th>
        <th class="tabcks">&nbsp;</th>
        <th class="tabck" id="tabck-3" onclick="activaTab(this)">Descargar Manual del Adminitrador</th>            
    </tr>

    <Td ROWSPAN=2 td class ="spritespaneladmin" id="paneladmin_jpg"></Td>

    
    <tr class="filadiv">
        <td colspan="6">
            <div class="tabdiv" id="tabdiv-1">
<!--                Contenido de la <b class="verde">Primera pestaña</b>-->

 <p align="justify">
                                  Sistema Web para consulta de frecuencias, determinaci&oacute;n de rutas de viaje y reservaci&oacute;n de boletos en las Cooperativas de Transporte de la 
                                  Terminal Terrestre “Reina del Cisne” de la ciudad de Loja.
                              </p>
            </div>
            <div class="tabdiv" id="tabdiv-2">
<!--                Otro contenido para la <b class="rojo">PESTAÑA 2ª</b>-->
<p align="justify">
                                  Sistema Web para consulta de frecuencias, determinaci&oacute;n de rutas de viaje y reservaci&oacute;n de boletos en las Cooperativas de Transporte de la 
                                  Terminal Terrestre “Reina del Cisne” de la ciudad de Loja.
                              </p>
            </div>
            <div class="tabdiv" id="tabdiv-3">
                El último contenido de la <b class="azul">Pestaña 3</b>
            </div>
        </td>
    </tr>
</table>
<script>
var maxTabs = 50;
window.onload = function(){
    activaTab(document.getElementById("tabck-1"));
}
function activaTab(unTab) {
    try {
        //Los elementos div de todas las pestañas están todos juntos en una
        //única celda de la segunda fila de la tabla de estructura de pestañas.
        //Hemos de buscar la seleccionada, ponerle display block y al resto
        //ponerle display none.
        var id = unTab.id;
        if (id){
            var idTab = id.split("tabck-");
            var numTab = parseInt(idTab[1]); 
            //Las "tabdiv" son los bloques interiores mientras que los "tabck"
            //son las pestañas.
            var esteTabDiv = document.getElementById("tabdiv-" + numTab);
            for (var i=1; i<maxTabs; i++) {
                var tabdiv = document.getElementById("tabdiv-" + i);
                if (tabdiv) {
                    var tabck = document.getElementById("tabck-" + i);
                    if (tabdiv.id == esteTabDiv.id) {
                        tabdiv.style.display = "block";
                        tabck.style.color = "blue";
                        tabck.style.backgroundColor = "rgb(235, 235, 225)";
                        tabck.style.borderBottomColor = "rgb(235, 235, 225)";
                    } else {
                        tabdiv.style.display = "none";
                        tabck.style.color = "white"; 
                        tabck.style.backgroundColor = "gray"; 
                        tabck.style.borderBottomColor = "gray";   
                    }
                } else {
                    break;
                }
            }
        }
    } catch (e) {
        alert("Error al activar una pestaña. " + e.message);
    }
}       
</script> 
 